<template>
  <div class="cont-wrapper nva_menu_container">
    <div class="menu_container wst">
      <contSidebar name="监考证管理" ref="contSideBar" :activeItem="activeItem" :siderList="list" @handleAcitve="handleAcitve"></contSidebar>
    </div>
    <div class="block-container container">
      <div class="title">监考证管理</div>
      <div class="filter-box">
        <el-form :inline="true">
          <el-form-item label="监考老师姓名:">
            <el-input v-model="filter.teacherName"></el-input>
          </el-form-item>
          <el-form-item label="所在学校:">
            <!-- <el-input v-model="filter.className"></el-input> -->
            <el-select class="mx-select" filterable v-model="filter.schoolName" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考点:">
            <el-input v-model="filter.area"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="c-btn va-top" type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="operation">
        <el-button type="primary" :disabled="tableData.length == 0 ? true : false" class="c-btn" :loading="downloading" @click="printTicket">打印全区监考证</el-button>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" border class="c-table" style="width: 100%" v-loading="loading">
          <el-table-column label="#" width="70">
            <template slot-scope="scope">
              {{ (listQuery.page - 1) * listQuery.pageSize  + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="teacherName" label="姓名"></el-table-column>
          <el-table-column prop="examDate" label="考试时间"></el-table-column>
          <el-table-column prop="code" label="编号"></el-table-column>
          <el-table-column prop="schoolName" label="考点"></el-table-column>
          <el-table-column prop="roomNum" label="考场号"></el-table-column>
          <el-table-column prop="roomPlace" label="监考地址"></el-table-column>
          <el-table-column prop="name" label="操作">
            <template slot-scope="scope">
              <span class="btn-txt" @click="previewTicketCard(scope.row)">查看监考证</span>
            </template>
          </el-table-column>
        </el-table>
        <kw-pagination v-if="tableData.length" :listQuery="listQuery" @changeCurrentPage="changeCurrentPage"></kw-pagination>
      </div>
    </div>
    <el-dialog title="查看监考证" :visible.sync="previewTicketCardVisible" width="560px">
      <div class="card-container" v-if="ticketCardInfo">
        <div class="sc-box">
          <div class="sc-top">
            <p class="title">
              {{ ticketCardInfo.examDate.substring(0, 4) }}年宁波市初中学业水平考试<br/>
              科学实验操作考试
            </p>
            <p class="title-card">监&nbsp;&nbsp;&nbsp;&nbsp;考&nbsp;&nbsp;&nbsp;&nbsp;证</p>
          </div>
          <div class="sc-cont">
            <div> 姓名：<div class="sc-name">{{ticketCardInfo.teacherName}}</div> </div>
            <div> 编号：<div class="sc-name">{{ticketCardInfo.code}}</div> </div>
          </div>
          <div class="sc-bottom">
            宁波市教育考试院 <br />
            {{ ticketCardInfo.examDate.substring(0, 4) }}年{{ ticketCardInfo.examDate.substring(5, 7) }}月
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="download-paper clearfix" id="downloadPaper" style="display: none;">
      <div class="sc-box" v-for="(item, idx) in userList" :key="idx">
        <div class="sc-top">
          <p class="title">
            {{ item.examDate.substring(0, 4) }}年宁波市初中学业水平考试<br/>
            科学实验操作考试
          </p>
          <p class="title-card">监&nbsp;&nbsp;&nbsp;&nbsp;考&nbsp;&nbsp;&nbsp;&nbsp;证</p>
        </div>
        <div class="sc-cont">
          <div> 姓名：<div class="name">{{item.teacherName}}</div> </div>
          <div> 编号：<div class="name">{{item.code}}</div> </div>
        </div>
        <div class="sc-bottom">
          宁波市教育考试院 <br />
          {{ item.examDate.substring(0, 4) }}年{{ item.examDate.substring(5, 7) }}月
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contSidebar from '@/components/navSidebar.vue'
import kwPagination from '@/components/Pagination.vue'
import schookListMixins from '../../common/mixins/schoolList.js'
export default {
  mixins: [schookListMixins],
  name: 'proctorTicket',
  components: {
    contSidebar,
    kwPagination
  },
  data () {
    return {
      filter: {
        teacherName: null,
        schoolName: null,
        area: null
      },
      tableData: [],
      showIdex: null,
      previewTicketCardVisible: false,
      loading: false,
      listQuery: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      ticketCardInfo: null,
      pointName: null,
      pointStudentNum: null,
      userList: [],
      downloading: false,
      activeItem: 0
    }
  },
  methods: {
    // 搜索学生信息
    handleFilter () {
      this.listQuery.page = 1
      let _id = ''
      this.list.map((item) => {
        if (item.name === this.filter.schoolName) {
          _id = item.id
        }
      })
      this.activeItem = _id
      this.$refs.contSideBar.setActiveId(this.activeItem)
      this.getSuperviseCardList()
    },
    // 翻页
    changeCurrentPage (queryData) {
      this.listQuery.page = queryData.page
      this.listQuery.pageSize = queryData.pageSize
      this.getSuperviseCardList()
    },
    // 获取监考证列表
    getSuperviseCardList () {
      let that = this
      that.loading = true
      that.pointName = null
      that.pointStudentNum = null
      let qsData = {
        teacherName: that.filter.teacherName,
        page: that.listQuery.page,
        pageSize: that.listQuery.pageSize,
        schoolName: that.filter.schoolName,
        area: that.filter.area
      }
      that.$http.getSuperviseCardList(qsData).then(res => {
        if (res.code === 20000) {
          that.tableData = res.data.content
          that.listQuery.total = res.data.totalElements
          that.listQuery.totalPages = res.data.totalPages
          if (res.data.content.length) {
            that.pointName = res.data.content[0].pointName
            that.pointStudentNum = res.data.totalElements
          }
        } else {
          that.$message.error(res.msg)
        }
        that.loading = false
      })
    },
    // 选择学校
    changeSchool (id, name) {
      this.filter.schoolName = name
      this.getSuperviseCardList()
    },
    // 查看监考证
    previewTicketCard (row) {
      this.ticketCardInfo = row
      this.previewTicketCardVisible = true
    },
    // 菜单回显
    handleAcitve (obj) {
      this.activeItem = obj.id
      this.$set(this.filter, 'schoolName', obj.name)
      this.getSuperviseCardList()
    },
    // 打印准考证
    printTicket () {
      let that = this
      const PAGE_SIZE = 9
      that.downloading = true
      that.$http.getAllInvigilates().then(res => {
        if (res.code === 20000) {
          let _len = res.data.length / PAGE_SIZE
          _len = parseInt(_len) === _len ? _len : parseInt(_len) + 1
          that.downloadPdf(0, _len, res.data, PAGE_SIZE)
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    async downloadPdf (idx, len, schoolUserData, pageSize) {
      let that = this
      that.userList = schoolUserData.slice(idx * pageSize, (idx + 1) * pageSize)
      that.$nextTick(async () => {
        let htmlEml = document.querySelector(`#downloadPaper`)
        let res = await that.$http.superviseCardCovert2Pdf({ data: htmlEml.innerHTML, destinationFileName: that.destinationFileName })
        if (res.code === 20000) {
          that.destinationFileName = res.data.destinationFileName
          if (res.data && res.data.destinationUrl && idx === len - 1) {
            that.downloading = false
            window.open(res.data.destinationUrl)
          } else {
            that.downloadPdf(idx + 1, len, schoolUserData, pageSize)
          }
        }
      })
    }
  },
  created () {
    this.userData = JSON.parse(sessionStorage.getItem('userData'))
    this.getSchoolList().then(res => {
      this.activeItem = res.id
      this.$refs.contSideBar.setActiveId(this.activeItem)
      this.$set(this.filter, 'schoolName', res.name)
      this.getSuperviseCardList()
    })
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
          line-height 48px
          text-align center
    tbody
      tr
        &:hover
          background #f9faff
        td
          height 46px
          font-size 14px
          line-height 46px
          text-align center
          .ann
            color #ccc
          .photo
            color color
            text-decoration none
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 26px;
    p
      span
        margin-left 20px
        color #fff
        font-size 12px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 12px
        text-decoration none
  .operation
    a
      float left
      text-decoration none
  .show-video
    background #fff
    box-shadow: 0px 0px 1px #ccc;
    width 100px
    height 120px
    border-radius 5px
    z-index 9
    left -24px
    position absolute
    ul
      padding 8px 0
      margin 0
      li
        line-height 36px
        cursor pointer
        &:hover
          color color
  .card-container
    color #000
    text-align center
    h3
      margin-top 60px
      font-size 24px
      span
        margin 0 40px
    .info
      margin-top 60px
      p
        span
          display inline-block
          width 140px
          border-bottom 1px solid #999
          text-align left
          padding-left 10px
    .footer
      margin-top 100px
      padding-bottom 30px
</style>

<style lang="scss" scoped>
.sc-box{
  width: 343px;
  height: 467px;
  border: 1px solid #000;
  color: #000;
  font-size: 18px;
  margin: 15px auto;
  .sc-top{
    padding: 30px 0;
    text-align: center;
    .title{
      font-size: 18px;
      text-align: center;
      line-height: 35px;
    }
    .title-card{
      font-size: 26px;
      line-height: 20px;
      text-align: center;
      font-weight: 600;
      margin: 80px auto 50px;
    }
  }
  .sc-cont{
    font-size: 16px;
    width: 226px;
    margin: 0 auto 50px;
    .sc-name{
      display: inline-block;
      border-bottom: 1px solid rgba(0,0,0,.2);
      width: 114px;
      text-align: center;
    }
  }
  .sc-bottom{
    font-size: 14px;
    text-align: center;
    line-height: 26px;
  }
}
</style>
